<template>
  <el-card>
    <el-descriptions title="个人基本信息" direction="vertical" border>
      <template slot="extra">
        <el-button type="primary" @click="personBtn()"  size="small">修改信息</el-button>
      </template>
      <el-descriptions-item label="姓名">{{ PersonList.name }}</el-descriptions-item>
      <el-descriptions-item label="性别">{{PersonList.sex}}</el-descriptions-item>
      <el-descriptions-item label="邮箱">{{PersonList.email}}</el-descriptions-item>
      <el-descriptions-item label="账号">{{PersonList.account}}</el-descriptions-item>
      <el-descriptions-item label="密码" >{{ PersonList.password }}</el-descriptions-item>
      <el-descriptions-item label="家庭住址">{{ PersonList.address }}</el-descriptions-item>
      <el-descriptions-item label="身份证号">{{PersonList.IDcard}}</el-descriptions-item>
      <el-descriptions-item label="手机号码">{{PersonList.phone}}</el-descriptions-item>
      <el-descriptions-item label="是否被冻结" >{{PersonList.freeze}}</el-descriptions-item>
    </el-descriptions>
<!--    修改弹窗-->
    <el-dialog title="修改个人信息" :visible.sync="Persondialog" width="40%">
      <el-form :model="person" :inline="true"  label-width="80px">
        <el-form-item label="姓名" >
          <el-input v-model="person.name" autocomplete="off"  :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="person.sex" placeholder="请选择">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱" >
          <el-input v-model="person.email" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="账号" >
          <el-input v-model="person.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" >
          <el-input v-model="person.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="家庭住址" >
          <el-input v-model="person.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" >
          <el-input v-model="person.IDcard" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" >
          <el-input v-model="person.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否冻结" >
          <el-input v-model="person.freeze" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="Persondialog = false">取 消</el-button>
        <el-button type="primary" @click="Personsub">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>



</template>

<script>
export default {
  name: "Personal",
  data(){
      return{
        Persondialog:false,
    person:{
      name:'',
      sex:'',
      email:'',
      account:'',
      password:'',
      address:'',
      IDcard:'',
      phone:'',
      freeze:''
    },
        PersonList:{
          name:'周凯尖',
          sex:'男',
          email:'3068472478@qq.com',
          account:'kkwudi',
          password:'123456',
          address:'柳州',
          IDcard:'4546545616546546',
          phone:'17386282871',
          freeze:'是'
        }

      }
  },
  methods:{
    Personsub(){
      console.log(this.person)
   this.Persondialog=false
    },
    //修改信息
    personBtn(){
   this.person=JSON.parse(JSON.stringify(this.PersonList))
   this.Persondialog=true
    }
  }
}
</script>

<style scoped>
.el-descriptions {
  width: 50%;
}
</style>
